﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="accordiontest.aspx.cs" Inherits="accordiontest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
            .header
            {
                background-color: #c0c0c0;
            }
            
            .item
            {
                background-color: #e0e0e0;
            }
            
            .selected
            {
                font-style: italic;
            }
            
            .header2
            {
                background-color: #c0c0ff;
            }
            
            .item2
            {
                background-color: #e0e0ff;
            }
            
            .selected2
            {
                text-decoration: underline;
            }
            
            .header3
            {
                background-color: #ffc0c0;
            }
            
            .item3
            {
                background-color: #ffe0e0;
            }
            
            .selected3
            {
                text-decoration: line-through;
            }
    </style>
    <script type="text/javascript" src="/scripts/NinJa.js"></script>
    <script type="text/javascript" src="/scripts/NinJaVisuals.js"></script>
    <script type="text/javascript" src="/scripts/NinJaControls.js"></script>
    <script type="text/javascript">
        Page.OnLoad.Add(function () {
            var a = new AccordionItem().Content("Content for accordion item #3");

            a.Header.Content("Accord item #3");
            var ac = $Accordion("Acc1");
            ac.Items.Add(a);
            ac.Items.Swap(ac.Items[0], ac.Items[1]);
            var b = new Accordion();
            var c = [];
            for (var i = 0; i < 3; i++) {
                var d = new AccordionItem();
                d.Header.Content("Dynamic item #" + (i + 1));
                d.Content("Dynamic item content #" + (i + 1));
                c.Add(d);
            }

            b.Items.AddRange(c);
            Page.AddElement(b);
            b.HeaderClass("header2").ItemClass("item2").SelectedClass("selected2");
            var e = b.Items[0];
            b.Items.Remove(e);
            ac.Items.Add(e);
            b.Effect(Effects.FoldVertical);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Acc1" class="accordion">
        <div header="Accordion item #1">Accordion item #1 contents.</div>
        <div>
            <span class="header">Accordion item #2</span>
            Accordion item #2 contents.
        </div>
    </div>
     <div class="accordion" headerclass="header3" itemclass="item3" selectedclass="selected3">
        <div  header="Red Accordion item #1">Red Accordion item #1 contents.</div>
        <div>
            <span class="header">Red Accordion item #2</span>
            Red Accordion item #2 contents.
        </div>
    </div>
    </form>
</body>
</html>
